<!--
 * @Description: 通用表格-弹窗布局，有他不加班
 * @author:张捉妖师
-->
<template>
  <div class="staff-manage">
    <!-- 添加删除公用组件使用 -->
    <slot name="zhactbar"></slot>
    <slot name="farmtypeselectslot"></slot>
    <div ref="commonLayout" class="common-layout">
      <!-- 搜索行 -->
      <div v-if="$slots.searchbox" class="search-box">
        <slot name="searchbox"></slot>
      </div>
      <!-- 主要区域 -->
      <div class="zhcontent">
        <!-- 其他内容 -->
        <slot name="tablebox"></slot>
      </div>
      <el-dialog title="添加信息" :visible.sync="isShowAddDia">
        <div>
          <slot name="form">添加信息弹框</slot>
        </div>
        <template v-slot:footer>
          <el-button class="model-cancel-btn" @click="fathercancel()">取 消</el-button>
          <el-button type="primary" class="model-submit-btn" @click="fathersave()">确 定</el-button>
        </template>
      </el-dialog>
    </div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowAddDia: false,
      //   isShowEditDia: false,
      screenHeight: document.body.clientHeight
    }
  },
  watch: {
    screenHeight(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenHeight = val
        this.timer = true
        let that = this
        // that.jisuanheight()
        setTimeout(function() {
          // 打印screenWidth变化的值
          that.jisuanheight()
          that.timer = false
        }, 400)
      }
    }
  },
  mounted() {
    const that = this
    window.onresize = () => {
      return (() => {
        // window.screenHeight = document.body.clientHeight
        // that.screenHeight = window.screenHeight
        that.screenHeight = document.body.clientHeight
      })()
    }
    this.jisuanheight()
  },
  methods: {
    fathercancel() {
      this.$emit("cancel", {})
    },
    fathersave() {
      this.$emit("save", {})
    },
    zhChanceStau(newval) {
    // 当状态为删除的时候触发删除方法---另外的删除修改添加，通过点击保存，调用方法来实现
      if (newval === 'add' || newval === 'edit') {
        // console.log("添加或修改状态")
        this.isShowAddDia = true
        // this.isShowEditDia = false
      } else {
        console.log("初始状态")
        this.isShowAddDia = false
        // this.isShowEditDia = false
      }
    },
    // jisuanheight() {
    //   let parent = this.$refs.commonLayout;
    //   parent.style.setProperty("height", '100%');
    //   // 获取元素实际需要占据的高度
    //   let height = parent.scrollHeight
    //   let zhactbar = this.$slots.zhactbar;
    //   if (!zhactbar) {
    //     height = height + 0
    //   } else {
    //     height = height - 100
    //   }
    //   parent.style.setProperty("height", height + 'px');
    //   // 判断是否使用农场类型插槽,动态设置高度
    //   // let searchboxnode = this.$slots.searchbox;
    //   // if (searchboxnode) {
    //   //   parent.style.setProperty("height", height - 40 + 'px');
    //   // } else {
    //   //   parent.style.setProperty("height", height + 'px');
    //   // }
    //   this.getheight()
    // },
    jisuanheight() {
      let parent = this.$refs.commonLayout;
      parent.style.setProperty("height", '100%');
      // 获取元素实际需要占据的高度
      let height = parent.scrollHeight - 60
      let zhactbar = this.$slots.zhactbar;
      if (!zhactbar) {
        height = height + 60
      }
      // 判断是否使用农场类型插槽,动态设置高度
      let farmtypenode = this.$slots.farmtypeselectslot;
      if (farmtypenode) {
        parent.style.setProperty("height", height - 50 + 'px');
      } else {
        parent.style.setProperty("height", height + 'px');
      }
      this.getheight()
    },
    // 我只是单纯的想拿个高度
    getheight() {
      let parent = this.$refs.commonLayout;
      let height = parent.scrollHeight - 180
      this.$emit('richheight', height)
    },
    // 我只是单纯拿个各宽度
    getwidth() {
      let parent = this.$refs.commonLayout;
      let width = parent.scrollWidth
      this.$emit('richwidth', width)
    }
  }
}
</script>
<style scoped lang="scss">
@import "~@/styles/variables.scss";
.staff-manage {
  width: 100%;
  height: 100%;
  .common-layout {
    border: 1px solid $borderColor;
    height: calc(100% - #{$actionBarHeight + 60});
    padding: 10px;
    .search-box {
      display: flex;
      align-items: center;
      margin-left: 20px;
      .label-input {
        display: flex;
        align-items: center;
        .label {
          width: 100px;
          white-space: nowrap;
        }
      }
      .search {
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          height: 30px;
        }
      }
    }
    .zhcontent {
      height: calc(100% - 50px);
      margin: 10px 0;
      // overflow-y: auto;
      position: relative;
    }
    // .zhcontent::-webkit-scrollbar {
    //   width: 6px !important;
    //   height: 1px;
    // }
    // .zhcontent::-webkit-scrollbar-thumb {
    //   /*滚动条里面小方块*/
    //   border-radius   : 10px;
    //   background-color: skyblue;
    //   background-image: -webkit-linear-gradient(
    //       45deg,
    //       rgba(255, 255, 255, 0.2) 25%,
    //       transparent 25%,
    //       transparent 50%,
    //       rgba(255, 255, 255, 0.2) 50%,
    //       rgba(255, 255, 255, 0.2) 75%,
    //       transparent 75%,
    //       transparent
    //   );
    // }
    // .zhcontent::-webkit-scrollbar-track {
    //   /*滚动条里面轨道*/
    //   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    //   background   : #ededed;
    //   border-radius: 10px;
    // }
  }
}

// 弹出框  统一样式
::v-deep .el-dialog__wrapper{
    background-color: rgba(124, 143, 143, .6);
  .el-dialog {
  background-color: rgba(240, 243, 247, 1);
  // width: 55% !important;
  min-width: 55%;
  border: #000 1px solid;
  border-radius: 9px;
  overflow: hidden;
  color: #000;
  .el-dialog__header {
    width: 100%;
    background-color: rgba(0, 110, 145, 1);
    padding: 15px;
    .el-dialog__title {
      font-weight: 700;
    }
    .el-dialog__close {
      font-size: 22px;
      color: #fff;
      font-weight: 700;
    }
  }
  .el-dialog__body {
    overflow: hidden;
    // overflow-y: auto;
    .el-input__inner {
      color: #000;
      border-color: rgba(217, 217, 217, 1);
      background-color: rgba(255, 255, 255, 1);
    }
    .el-textarea__inner {
      color: #000;
      border-color: rgba(217, 217, 217, 1);
      background-color: rgba(255, 255, 255, 1);
    }
    .el-form {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      .total-price {
        color: #000;
      }
      .el-row {
        width: 100%;
        margin-bottom: 10px;
        .el-table {
          max-height: 200px;
          overflow-y: auto;
          background-color: rgba(255, 255, 255, 1);
          .cell {
            color: #000;
          }
          th {
            background-color: rgba(230, 230, 230, 1);
          }
          th.is-leaf {
            border-color: rgba(77, 77, 77, 1);
          }
          td {
            border-color: rgba(77, 77, 77, 1);
          }
          tr:hover {
            background-color: rgba(77, 77, 77, 1);
          }
          .el-table__empty-text {
            color: #000;
          }
          .current-row {
            // background-color: rgb(177, 177, 177);
            background-color: #dbdbdb !important;
          }
          .el-table__row--striped {
            background-color: rgba(255, 255, 255, 1);
          }
          // color: #000;
        }
        .el-table--border {
          border-color: rgba(77, 77, 77, 1);
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
        }
        .el-table--enable-row-hover .el-table__body tr:hover > td {
          background-color: rgb(177, 177, 177);
        }
        .el-table__body tr.current-row > td {
          background-color: #dbdbdb !important;
        }
        // .el-button {
        //   width: 100%;
        // }
        .el-form {
          // width: 100%;
          // margin: ;
          .el-form-item {
            margin-bottom: 0 !important;
          }
          .el-form-item__content {
            display: flex;
            width: 100%;
            .el-select {
              min-width: 15%;
            }
            .el-input {
              min-width: 10%;
            }
            .el-input__inner {
              border-right: none;
            }
            .el-button {
              min-width: 5%;
              margin-left: 10px;
            }
          }
        }
      }
      .el-form-item {
        display: flex;
        .el-form-item__label {
          line-height: 36px;
          min-width: 120px;
          text-align: end;
        }
        .el-form-item__content {
          line-height: 36px;
          width: 100%;
          display: flex;
        }
      }
    }
  }
  .el-dialog__footer {
    width: 100%;
    border-top: 1px solid rgba(191, 191, 191, 1);
    position: inherit;
    text-align: right;
    padding: 15px;
  }
  .el-form-item__label {
    color: #000;
    font-weight: 400;
    font-size: 16px;
  }
}}

</style>
